const webpack = require("webpack");
module.exports = {
  baseUrl: process.env.NODE_ENV === "production" ? "/cdn/animalTag/" : "/",
  pages: {
    index: {
      // page 的入口
      entry: "src/main.js",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "首页",
      chunks: ["chunk-vendors", "chunk-common", "index"]
    }
  },
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: "async", // 代码块类型 必须三选一： "initial"（初始化） | "all"(默认就是all) | "async"（动态加载）
        minSize: 0, // 最小尺寸，默认0
        minChunks: 1, // 最小 chunk ，默认1
        maxAsyncRequests: 1, // 最大异步请求数， 默认1
        maxInitialRequests: 1, // 最大初始化请求书，默认1
        name: () => {}, // 名称，此选项课接收 function
        cacheGroups: {
          // 缓存组会继承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用于配置缓存组。
          priority: "0", // 缓存组优先级 false | object |
          vendor: {
            // key 为entry中定义的 入口名称
            chunks: "async", // 必须三选一： "initial"(初始化) | "all" | "async"(默认就是异步)
            test: /node_modules/, // 正则规则验证，如果符合就提取 chunk
            name: "vendor", // 要缓存的 分隔出来的 chunk 名称
            minSize: 0,
            minChunks: 1,
            enforce: true,
            reuseExistingChunk: true // 可设置是否重用已用chunk 不再创建新的chunk
          }
        }
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        Popper: ["popper.js", "default"]
      })
    ]
  }
};